<template>
  <div>
    <div class="modal fade" id="updatePfp" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="staticBackdropLabel">更换头像</h1>
            <button type="button" ref="closeBtn" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <form @submit.prevent="updatePfp">
          <div class="modal-body">
              <div class="form-control py-3">
                <input id="pfp" type="file" accept=".jpg, .jpeg, .png" name="avatar" @change="previewPfp" class=" form-control mb-2">
                <label for="pfp" class="pfp-chooser"><font-awesome-icon :icon="['fas', 'file-image']" class="cursor-pointer" /> <span class="pfp-text">点此上传头像</span></label>
                <img src="" alt="Empty" ref="previewImage" id="previewImage" width="50" height="50">
              </div>
              <span class="form-text"><small>* 允许 jpg, jpeg, png格式, 最大2MB</small></span>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-primary">上传</button>
          </div>
          </form>
        </div>
      </div>
    </div>
  </div>

</template>
<script setup>
import {userStore} from "@/stores/userStore.js";
const userAction = userStore()
const { userInfo, setUserInfo} = storeToRefs(userAction)
import {ref} from "vue";
import axios from "axios";
import {host_custom} from "@/host.js";
import {storeToRefs} from "pinia";
import Swal from "sweetalert2";

const pfpFile = ref()
const previewImage = ref()
const closeBtn = ref()
const pfpInput = ref()

const updatePfp = async () => {
  const rs = await axios.patch(`${host_custom}/updateAvatar`, { avatar: pfpFile.value, uid: userInfo.value.id },{
    headers: {'Content-Type': 'multipart/form-data'},
  })
  if (rs.status === 200) {
    console.log(rs)
    userInfo.value.avatar = rs.data
    pfpFile.value = null
    previewImage.value.style.display = 'none'
    previewImage.value.src = ''
    closeBtn.value.click()
    Swal.fire({
      background: '#323542',
      icon: "success",
      toast: true,
      color: '#cbcbcb',
      title: "上传成功",
      position: "top",
      showConfirmButton: false,
      timer: 2000
    })
  }
}

const previewPfp = (e) => {
  const pfpText = document.querySelector('.pfp-text')
  if (e.target.files.length > 0) {
    pfpText.innerText = '预览'
    pfpFile.value = e.target.files[0]
    pfpInput.value = e
    previewImage.value.style.display = 'initial'
    previewImage.value.src = URL.createObjectURL(e.target.files[0])
    URL.revokeObjectURL(e.target.files[0])
  }
}
</script>

<style scoped>
#previewImage {
  margin-left: 10px;
  overflow: hidden;
  max-width: 50px;
  max-height: 50px;
  display: none;
  border-radius: 50%
}
</style>